<script>
  import $ from '../dfish.js'
  import {
    h
  } from 'vue'
  import WidgetBase from './WidgetBase.vue'
  import Scroll from './Scroll.vue'
  import PubParent from './PubParent.vue'
  import ResizeObserver from 'resize-observer-polyfill'


  export default {
    name: 'w-timeline',
    mixins: [Scroll, PubParent],
    props: ['face', 'vertical'],
    methods: {
      indent() {
        let len = this.$refs.wrap.querySelectorAll('.w-timeline-item').length
        if (len <= 1) return
        let vt = this.x.vertical
        let size = vt ? 'width' : 'height'
        let prevWidth = 0
        let nextWidth = 0
        for (let i = 0; i < len; i++) {
          let prev = this.$refs.wrap.querySelector(`.w-timeline-item[w-index="${i}"]`)
          let next = i < len - 1 && this.$refs.wrap.querySelector(`.w-timeline-item[w-index="${i+1}"]`)
          let prevBcr = $.bcr(prev.querySelector('.w-timeline-item-icon-img'))
          if (prev.parentNode == this.$refs.prev) {
            prevWidth = Math.max(prevWidth, prevBcr[size])
          } else {
            nextWidth = Math.max(nextWidth, prevBcr[size])
          }
          if (next && prev.parentNode != next.parentNode) {
            let nextBcr = $.bcr(next.querySelector('.w-timeline-item-icon-img'))
            if (vt && prevBcr.bottom + 25 > nextBcr.top) {
              $.q(next).css({
                marginTop: prevBcr.bottom + 25 - nextBcr.top
              })
            } else if (!vt && prevBcr.right + 50 > nextBcr.left) {
              $.q(next).css({
                marginLeft: prevBcr.right + 50 - nextBcr.left
              })
            }
          }
        }
        let prevItems = $.q('.w-timeline-item', this.$refs.prev)
        prevItems.each((i, v) => {
          let icon = $.q('.w-timeline-item-icon', v)
          let bcr = $.bcr(icon[0])
          icon.css({
            [vt ? 'marginRight' : 'marginBottom']: (prevWidth - bcr[size]) / 2
          })
        })
        $.q('.w-timeline-item', this.$refs.next).each((i, v) => {
          let icon = $.q('.w-timeline-item-icon', v)
          let bcr = $.bcr(icon[0])
          icon.css({
            [vt ? 'marginLeft' : 'marginTop']: (nextWidth - bcr[size]) / 2
          })
        })
        prevItems.length && $.q(this.$refs.next).css({
          [vt ? 'marginLeft' : 'marginTop']: `-${nextWidth/2 + prevWidth/2}px`
        })

        let firstBcr = $.bcr($.q(`.w-timeline-item[w-index="0"] .w-timeline-item-icon-img`, this.$refs.wrap)[0])
        let lastBcr = $.bcr($.q(`.w-timeline-item[w-index="${len-1}"] .w-timeline-item-icon-img`, this.$refs.wrap)[0])
        let wrapBcr = $.bcr(this.$refs.wrap)
        if (this.x.vertical) {
          $.q(this.$refs.line).css({
            width: 2,
            height: lastBcr.top - firstBcr.bottom,
            top: firstBcr.bottom - wrapBcr.top,
            left: (firstBcr.left + firstBcr.right) / 2 - wrapBcr.left - 1,
          })
        } else {
          $.q(this.$refs.line).css({
            width: lastBcr.left - firstBcr.right,
            height: 2,
            top: (firstBcr.top + firstBcr.bottom) / 2 - wrapBcr.top - 1,
            left: firstBcr.right - wrapBcr.left
          })
        }

      },
      html_slots() {
        let prevSlots = []
        let nextSlots = []
        let vt = this.x.vertical
        this.slots_children().forEach((c, i) => {
          $.lodash.set(c, 'props.index', i)
          if (vt) {
            (c.props.position == 'right' ? prevSlots : nextSlots).push(c)
          } else {
            (c.props.position == 'bottom' ? nextSlots : prevSlots).push(c)
          }
        })
        return this.html_scroll_slots(
          h('div', {
            ref: 'wrap',
            class: 'w-timeline-wrap'
          }, [
            h('div', {
              ref: 'line',
              class: 'w-timeline-line'
            }),
            h('div', {
              ref: 'prev',
              class: ['w-timeline-prev', {[`f-${this.x.vertical?'v':'h'}-gap`]: $.br.compat.gap}]
            }, prevSlots),
            h('div', {
              ref: 'next',
              class: ['w-timeline-next', {[`f-${this.x.vertical?'v':'h'}-gap`]: $.br.compat.gap}]
            }, nextSlots),
          ])
        )
      }
    },
    computed: {
      html_class() {
        return [this.html_scroll_class,
          {
            ['z-face-' + this.x.face]: this.x.face,
            'z-horizontal': !this.x.vertical,
            'z-vertical': this.x.vertical
          }
        ]
      }
    },
    mounted() {
      this.indent()
      const observe = () => {
        if (this.$refs.wrap && this.$refs.next) {
          $.q('.w-timeline-item', this.$refs.wrap).css({[this.x.vertical ? 'marginTop' : 'marginLeft']: 0})
          $.q(this.$refs.next).css({[this.x.vertical ? 'marginTop' : 'marginLeft']: 0})
          this.indent()
        }
      }
      new ResizeObserver(observe).observe(this.$refs.wrap)
    }
  }
</script>

<style>
  .w-timeline-wrap {
    flex-shrink: 0;
    display: flex;
    position: relative;
    width: max-content;
    min-width: 100%;
  }

  .w-timeline.z-horizontal .w-timeline-wrap {
    flex-direction: column;
  }

  .w-timeline.z-horizontal .w-timeline-prev .w-timeline-item {
    flex-direction: column-reverse;
  }

  .w-timeline.z-vertical .w-timeline-wrap,
  .w-timeline.z-vertical .w-timeline-item {
    flex-direction: row;
  }

  .w-timeline.z-vertical .w-timeline-prev,
  .w-timeline.z-vertical .w-timeline-next {
    flex-direction: column;
  }

  .w-timeline.z-vertical .w-timeline-prev .w-timeline-item {
    flex-direction: row-reverse;
  }

  .w-timeline-prev,
  .w-timeline-next {
    position: relative;
    display: flex;
    flex: 1;
    flex-shrink: 0;
    --w-compat-gap: 25px;
    gap: var(--w-compat-gap);
  }
  
  .w-timeline-prev:empty,
  .w-timeline-next:empty {
    display: none;
  }

  .w-timeline-item {
    position: relative;
    display: flex;
    flex-shrink: 0;
  }

  .w-timeline.z-horizontal .w-timeline-item {
    flex-direction: column;
  }

  .w-timeline.z-horizontal .w-timeline-item-icon {
    align-items: center;
  }

  .w-timeline.z-horizontal .w-timeline-item-main {
    padding: 10px 0;
  }

  .w-timeline.z-vertical .w-timeline-item-main {
    padding: 0 10px;
  }

  .w-timeline.z-vertical .w-timeline-item.z-right {
    text-align: right;
  }

  .w-timeline-item-icon {
    display: flex;
    flex-shrink: 0;
    position: relative;
    line-height: 1;
  }

  .w-timeline-item-icon-img.z-default {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #1890ff;
    border-radius: 100px;
    background: #fff;
    color: #1890ff;
  }

  .w-timeline-line {
    position: absolute;
    background: #ddd;
  }
  
</style>
